<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 头部 -->
    <div v-if="isSubjectID !== undefined" slot="header" class="clearfix">
      <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item>学科管理</el-breadcrumb-item>
       <el-breadcrumb-item>{{isSubjectName}}</el-breadcrumb-item>
       <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 下方输入框 -->
    <el-row :gutter="10">
      <el-col :span="6">
      <el-form label-width="80px">
        <el-form-item label="目录名称">
         <el-input v-model="tagName"></el-input>
        </el-form-item>
      </el-form>
      </el-col>
      <el-col :span="6">
        <el-form label-width="80px">
          <el-form-item label="状态">
            <el-select v-model="state" placeholder="请选状态">
            <el-option label="已启用" :value="1"></el-option>
            <el-option label="已禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
        <el-button @click="clearName">清除</el-button>
        <el-button
        :loading="isLoad"
        type="primary" @click="Search">搜索</el-button>
      </el-col>
      <el-col :span="3">
        <div class="backSub">
          <el-button v-show="isSubjectID !== undefined" @click="$router.push('list')" icon="el-icon-back" type="text">返回学科</el-button>
        </div>
      </el-col>
      <el-col :span="3">
       <el-button class="addRg" @click="dialogVisible = true" type="success" icon="el-icon-edit">新增目录</el-button>
      </el-col>
    </el-row>
    <!-- 提示总条数 -->
    <div class="counts"><i class="el-icon-info"></i>{{'数据一共'+counts+'条'}}</div>
    <!-- table表格数据渲染 v-loading="isLoad"-->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
       type="index"
       label="序号"
       width="50">
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科"
        width="150">
      </el-table-column>
      <el-table-column
        prop="tagName"
        label="标签名称"
        width="150">
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者"
         width="150">
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="创建日期"
         width="180"
         :formatter="filterTag">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        >
        <template slot-scope="scope">
          {{scope.row.state === 1 ? '已启用' : '已禁用'}}
        </template>
      </el-table-column>
      <el-table-column
      label="操作"
      width="180">
      <template slot-scope="scope">
        <el-button
          :loading="index === scope.$index && isLoad"
          @click.native.prevent="changeState(scope.$index, scope.row)"
          type="text"
          size="small">
          {{scope.row.state === 1 ? '禁用' : '启用'}}
        </el-button>
        <el-button
          :loading="index === scope.$index && isLoad && scope.row.state === 0"
          :disabled="scope.row.state === 1"
          @click.native.prevent="changeRow(scope.$index, scope.row)"
          type="text"
          size="small">
          修改
        </el-button>
        <el-button
        :loading="index === scope.$index && isLoad && scope.row.state === 0"
        :disabled="scope.row.state === 1"
          @click.native.prevent="deleteRow(scope.$index, scope.row)"
          type="text"
          size="small">
          删除
        </el-button>
      </template>
    </el-table-column>
    </el-table>
    <!-- 分页系统 -->
    <el-pagination
    class="pageRt"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      layout="prev, pager, next, sizes, jumper"
      :total="counts">
    </el-pagination>
    <!-- 点击添加-->
    <my-tags :isSubjectID = "isSubjectID" v-model="dialogVisible" :row="row" @refTag="refTag"></my-tags>
    <!-- 点击修改 -->
    </el-card>
  </div>
</template>

<script>
// 引入时间过滤器
import moment from 'moment'
// 获取列表 删除列表 修改启用禁用
import { list, remove, changeState } from '@/api/hmmm/tags.js'
// 引入弹出层组件
import myTags from '../components/tags-add'
export default {
  data () {
    return {
      // 弹出层组件绑定数
      // 添加是否弹出组件
      dialogVisible: false,
      // 目录名称
      tagName: '',
      // 上方下拉选择框状态状态
      state: null,
      // 标签列表数据
      tableData: [],
      // 总条数
      counts: null,
      // 第几页
      page: 1,
      // 当前页
      currentPage4: 1,
      // 每页多少条
      pagesize: 5,
      // 按钮请求优化
      isLoad: false,
      // 启用禁用按钮优化
      index: null,
      // // 删除按钮优化
      // isDisable: null,
      // 是从学科来的么？
      // 学科id
      isSubjectID: this.$route.query.id,
      // 学科名
      isSubjectName: this.$route.query.name,
      // 点击修改传入当前行
      row: {}
    }
  },
  components: {
    myTags
  },
  created () {
    this.loadTags()
    // this.getSUnList()
  },
  methods: {
    refTag () {
      // 让当前行恢复初始值
      console.log(22222)
      this.row = {}
      // 刷新页面
      this.loadTags()
    },
    // 修改按钮数据回显
    changeRow (idx, row) {
      // 弹出层显示 数据回显
      this.dialogVisible = true
      this.row = row
    },
    // -----------------------按钮状态-------------------------
    // 修改状态按钮启用禁用
    async changeState (idx, row) {
      // 请求优化减少按钮点击次数
      this.isLoad = true
      this.index = idx
      try {
        let { id, state } = row
        state = state === 1 ? 0 : 1
        const res = await changeState({ id, state })
        console.log(res)
        row.state = state
        this.$message.success('操作成功')
        // 关闭loading
        this.isLoad = false
      } catch (error) {
        console.log(error)
        this.$message.success('操作失败')
        this.isLoad = false
      }
    },
    // 删除按钮
    deleteRow (idx, row) {
      this.$confirm('删除了就不能快乐的玩耍了?', '提示', { type: 'warning' })
        .then(async () => {
          this.isLoad = true
          try {
            const id = row.id
            const res = await remove({ id })
            console.log(res)
            this.$message.success('标签删除成功')
            // 重新调用接口渲染数据
            this.loadTags()
          } catch (error) {
            console.log(error)
            this.$message.error('删除标签失败')
          }
        })
        .catch(() => {})
    },
    // 点击搜索
    Search () {
      this.isLoad = true
      // if (this.tagName !== '' || this.state !== null) {
      this.page = 1
      this.currentPage4 = 1
      this.pagesize = 5
      this.loadTags()
      // } else {
      //   this.$message('请输入您要查找的目录名称或请选择状态')
      // }
    },
    // 点击清除
    clearName () {
      this.tagName = ''
      this.state = null
    },
    // 每页多少条发生改变时触发
    handleSizeChange (val) {
      this.isLoad = true
      this.page = 1
      this.currentPage4 = 1
      this.pagesize = val
      this.loadTags()
    },
    // 当前页发生改变时
    handleCurrentChange (val) {
      this.isLoad = true
      this.page = val
      this.currentPage4 = val
      this.loadTags()
    },
    // 获取标签列表
    async loadTags () {
      try {
        const res = await list(
          {
            page: this.page,
            pagesize: this.pagesize,
            tagName: this.tagName,
            state: this.state,
            subjectID: this.isSubjectID
          }
        )
        console.log(res)
        this.tableData = res.data.items
        // console.log(this.tableData)
        this.counts = res.data.counts
        this.isLoad = false
      } catch (error) {
        console.log(error)
        this.isLoad = false
      }
    },
    // table过滤时间方法
    filterTag (value, row, column) {
      // console.log(value)
      // console.log(row)
      console.log(column)
      return moment(column).format('YYYY-MM-DD  hh:mm:ss')
    }
  },
  watch: {
    '$route.query.id' (newVal) {
      this.isSubjectID = newVal
      this.loadTags()
    }
  }
}
</script>

<style scoped lang='less'>
.box-card{
  margin: 20px;
}
.el-row{
  margin-top: 10px;
}
.backSub{
  text-align: right;
  min-height: 2px;
}
.counts{
  height: 30px;
  line-height: 30px;
  margin: 10px 0;
  font-size: 14px;
  color: #909399;
  background-color: #eeeeee;
  i{
    margin: 0 10px;
  }
}
.pageRt{
  float: right;
  margin: 15px 0;
}
/deep/ .el-dialog__footer{
  text-align: right;
}
</style>
